<template>
  <div id="videoBar">
    <Swiper class='swiper' :options = 'swiperOptions'>
      <SwiperSlide class= 'swiper-slide' v-for="video in videos" :key="video.id">
        <VideoPlayer :video = "video"></VideoPlayer>
        <VideoInfo :video = "video"></VideoInfo>
        <VideoAction :video = "video"></VideoAction>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import VideoPlayer from './VideoPlayer.vue'
import VideoInfo from './VideoInfo.vue'
import VideoAction from './VideoAction.vue'


export default {
  name: 'Video',
  data(){
    return {
      videos:[],
      curr: 0,
      swiperOptions:{
        slidesPerView: 'auto',
        direction: 'vertical',
        centeredSlides:true,
        spaceBetween: 10,
        loop:false,
        speed:600, 
        on: {
          click: (e) => {
            let currVideo = document.getElementById("video" + e.activeIndex);
            currVideo.paused ? currVideo.play() : currVideo.pause();
          },
          slideChange: (e) => {
            document.getElementById("video" + e.activeIndex).play();
          },
        }
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    VideoPlayer,
    VideoInfo,
    VideoAction
  },
  created(){
    this.getVideos();
  },
  mounted(){
    let video = document.getElementById("video" + this.curr);
    video.play();
  },
  methods: {
    getVideos(){
        const mockVideos = [
          {
            id: 0,
            src: '/video/video1.mp4',
            user: {
              name: '用户1',
              experience: '一年以下',
              education: '本科',
              avatar: '/avatar/avatar1.jpeg'
            },
            position: '上海',
            description: '我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述',
          },
          {
            id: 1,
            src: '/video/video2.mp4',
            user: {
              name: '用户2',
              experience: '二年以下',
              education: '硕士',
              avatar: '/avatar/avatar2.jpeg'
            },
            position: '上海',
            description: '我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述',
          },
          {
            id: 2,
            src: '/video/video3.mp4',
            user: {
              name: '用户3',
              experience: '三年以下',
              education: '大专',
              avatar: '/avatar/avatar3.jpeg'
            },
            position: '上海',
            description: '我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述',
          }
        ];
        this.videos = mockVideos;
    }
  }
}
</script>
<style>
.swiper {
  width: 100%;
  height: 100%;
  /* background-color: yellow; */
}
.swiper-slide {
  /* background-color: pink; */
  width: 100%;
  height: 90%;
}
</style>
